<template>
    <input type="file" accept="image/*" @change="change" :title="titile" :disabled="disabled" v-if="!multiple"></input>
    <input type="file" class="mutiUpLoad" multiple="multiple" accept="image/*" :title="titile" v-else="multiple" @change="change" :disabled="disabled"></input>
</template>

<script>
    import util from "../utils/util";
    import { loginService } from "@/services";
    import { Toast } from "mint-ui";
    export default {
        name: "img_input",
        props:[
            'name',
            'disabled',
            'multiple',
            'limit',
            'titile'
        ],
        mounted:function(){
            this.multiple1 =this.multiple
        },
        methods:{
            change:function (e) {
                if(this.multiple1){
                    this.doUpload1(e)
                }else{
                    this.doUpload(e)
                }
            },
            // 单张上传图片
            async doUpload(evt){
                var self=this;
                console.log(self.$parent,111111);
                let files=evt.target.files;
                // if(files.length===0){
                //     Toast('请选择需要上传的图片');
                //     return
                // }
                let file = files[0];
                if(!file){
                    return false;
                }
                if(file.size > 0 && file.size > 5242880){
                    Toast('请小于5M的图片');
                    return
                }
                self.$parent.uploading=true;
                let form = new FormData();
                form.append('type','qiniu_upload');
                form.append('folder','template');
                form.append('uploadFile',file)
                form.append('fileName',file.name)
                let result=await loginService.uploadFile(form);
                console.log(result,'gggggg')
                if(result.data.success){
                    self.$parent.uploading=false;
                    // console.log(result);
                    console.log(self.$parent.obj[self.name],222222);
                    self.$parent.obj[self.name]=result.data.single.filepath;
                    // console.log(this.Imgurl)
                    Toast('图片上传成功')
                }else{
                    Toast('图片上传失败');
                }
            },
            // 多张上传图片
            async doUpload1(evt){
                var self=this;
                let files=evt.target.files;
                if(files.length>(this.limit?this.limit:6)){
                    Toast('上传最多不能超过'+(this.limit?this.limit:6)+'张图片哦');
                    return
                }
                if(files.length==0){
                    return false;
                }
                // var imageFile = new Array();
                self.$parent.uploading=true;
                self.$parent.obj[self.name]=[];
                for(var i = 0; i<files.length; i++){
                    if(files[i].size > 0 && files[i].size > 5242880){
                        Toast('第'+(i+1)+'张图片请选择小于5M的图片');
                        return
                    }
                    // console.log(files[i].name);
                    let form = new FormData();
                    form.append('type','qiniu_upload');
                    form.append('folder','template');
                    form.append('uploadFile',files[i]);
                    form.append('fileName', files[i].name);
                    let result=await loginService.uploadFile(form);
                    if(result.data.success){
                        self.$parent.uploading=false;
                        self.$parent.obj[self.name].push(result.data.single.filepath);
                        // console.log(this.obj.imageFile);
                    }else{
                        Toast('图片上传失败');
                    }
                }
            },
        }
    }
</script>

<style scoped>
    input{
        opacity: 0;
        cursor: pointer;
        z-index: 9;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .mutiUpLoad{
        opacity: 0;
        cursor: pointer;
        z-index: 9;
        position: absolute;
        width: 80%;
        height: 80%;
        top: 0;
        left: 10%;
        right: 0;
        bottom: 20%;
    }
</style>
